<template>
    <div>
        <TableList :table-info="tableInfo"></TableList>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import TableList from '@/components/common/table/TableList.vue'
import { ButtonType, IconType, SizeType, TableCellType } from '@/entity/enums/CommonType';
import TableCell from '@/entity/table/TableCell';
import TableContent from '@/entity/table/TableContent';
import TableHead from '@/entity/table/TableHead';
import TableListPageInfo from '@/entity/table/TableListPageInfo';
import TableRow from '@/entity/table/TableRow';
import ButtonInfo from '@/entity/button/ButtonInfo';

const onCreate = () => {
    console.log('创建')
}

const onRefresh = () => {
    console.log('刷新')
}

const onUpdate = (name: string) => {
    console.log(name)
}

const onDelete = (name: string) => {
    console.log(name)
}

const initTableData = () => {
    // let routes = computed(() => store.state.permissionModule.accessRoutes)
    // state.data = routes.value;
    // state.total = routes.value.length;
    const ops = [
        new ButtonInfo(ButtonType.primary, SizeType.small, onUpdate, '修改', IconType.edit),
        new ButtonInfo(ButtonType.warning, SizeType.small, onDelete, '删除', IconType.minus),
    ]
    // 表头
    const heads: TableHead[] = [
        new TableHead("菜单名称", "name", TableCellType.data),
        new TableHead("菜单状态", "state", TableCellType.state),
        new TableHead("图标", "icon", TableCellType.icon),
        new TableHead("路径", "url", TableCellType.data),
        new TableHead("操作", "operation", TableCellType.operation)
    ];
    // 表内容，每行数据
    const row1: TableCell[] = [
        new TableCell("name", TableCellType.data, "首页1"),
        new TableCell("state", TableCellType.data, "1"),
        new TableCell("icon", TableCellType.icon, "ic ic-homepage-fill"),
        new TableCell("url", TableCellType.data, "/"),
        new TableCell("operation", TableCellType.operation, ops)
    ];
    const row2: TableCell[] = [
        new TableCell("name", TableCellType.data, "系统管理"),
        new TableCell("state", TableCellType.data, "1"),
        new TableCell("icon", TableCellType.icon, "ic ic-homepage-fill"),
        new TableCell("url", TableCellType.data, "/system"),
        new TableCell("operation", TableCellType.operation, ops)
    ];
    const row3: TableCell[] = [
        new TableCell("name", TableCellType.data, "数据字典"),
        new TableCell("state", TableCellType.data, "0"),
        new TableCell("icon", TableCellType.icon, "ic ic-homepage-fill"),
        new TableCell("url", TableCellType.data, "/dict"),
        new TableCell("operation", TableCellType.operation, ops)
    ];
    const row4: TableCell[] = [
        new TableCell("name", TableCellType.data, "用户管理"),
        new TableCell("state", TableCellType.data, "2"),
        new TableCell("icon", TableCellType.icon, "ic ic-homepage-fill"),
        new TableCell("url", TableCellType.data, "/user"),
        new TableCell("operation", TableCellType.operation, ops)
    ]
    const rowList: TableRow[] = [
        new TableRow(1, row1),
        new TableRow(2, row2),
        new TableRow(3, row3),
        new TableRow(4, row4)
    ]
    const tableContent = new TableContent(heads, rowList);
    // 表头功能按钮
    const buttonList: ButtonInfo[] = [
        new ButtonInfo(ButtonType.primary, SizeType.small, onCreate, "新增", IconType.plus),
        new ButtonInfo(ButtonType.success, SizeType.small, onRefresh, "刷新", IconType.refresh)
    ]

    // 表内容
    const tableInfo = new TableListPageInfo(buttonList, tableContent);
    return tableInfo;
}
const tableInfo = ref<TableListPageInfo>(initTableData())

const onCurrentChange = (val: number) => {
    tableInfo.value.page = val;
    console.log('下一页', tableInfo.value.page)
}

const onSizeChange = (val: number) => {
    tableInfo.value.limit = val;
    console.log('每页限制', tableInfo.value.limit)
}

tableInfo.value.onCurrentChange = onCurrentChange;
tableInfo.value.onSizeChange = onSizeChange;


</script>
<style lang="stylus" scoped></style>
  